<template>
	<upper />
	<!-- <image mode="aspectFill" class="usHead" src="https://aph.junhecms.com/image/homePage/27.png" /> -->

	<u-swiper
		:list="swiperList"
		:height="swiperParams.height"
		@click="handleSwiper"></u-swiper>

	<view class="main">
		<u-gap height="10rpx"></u-gap>
		<view class="main-item flex align-items_center">
			<view class="main-item-title">姓名</view>
			<up-input
				v-model="form.name"
				placeholder="请输入姓名"
				clearable
				border="none"></up-input>
		</view>
		<view class="main-item flex align-items_center">
			<view class="main-item-title">手机号</view>
			<up-input
				v-model="form.phone"
				placeholder="请输入手机号"
				clearable
				border="none"></up-input>
		</view>
		<view class="main-item flex align-items_center">
			<view class="main-item-title">公司名称</view>
			<up-input
				v-model="form.company"
				placeholder="请输入公司名称"
				clearable
				border="none"></up-input>
		</view>
		<view class="main-item flex align-items_center">
			<view class="main-item-title">邮箱</view>
			<up-input
				v-model="form.email"
				placeholder="请输入邮箱"
				clearable
				border="none"></up-input>
		</view>
		<view class="main-item flex align-items_center" @click="handleProduct">
			<view class="main-item-title">产品名称</view>
			<up-input
				v-model="form.proname"
				placeholder="请选择产品"
				clearable
				readonly
				border="none"
				suffixIcon="arrow-down"></up-input>
		</view>
		<u-gap height="20rpx"></u-gap>
	</view>

	<u-gap height="20rpx"></u-gap>

	<view class="main">
		<view class="main-item flex" style="border: 0px">
			<view class="main-item-title">描述</view>
			<u--textarea
				v-model="form.description"
				placeholder="请输入您的需求"
				count
				border="none"
				:maxlength="300"></u--textarea>
		</view>
	</view>

	<u-gap height="66rpx"></u-gap>
	<view class="btnConfirm" @click="confirm">立即提交</view>
	<u-gap height="43rpx"></u-gap>

	<!-- 产品 -->
	<u-popup :show="productShow" @close="confirmProduct">
		<view class="product relative">
			<image
				@click="confirmProduct"
				class="product-close absolute"
				src="https://aph.junhecms.com/image/homePage/19.png" />
			<view class="product-head">选择产品</view>
			<scroll-view :scroll-y="true" class="product-main">
				<view class="dotData" v-if="productList.length <= 0">数据为空</view>

				<view
					v-for="item in productList"
					:key="item.id"
					class="product-item flex space-between align-items_center"
					@click="form.proid = item.id">
					<view>{{ item.title }}</view>
					<image
						v-show="form.proid === item.id"
						src="https://aph.junhecms.com/image/homePage/20.png" />
				</view>
				<view
					class="product-item flex space-between align-items_center"
					@click="form.proid = 0">
					<view>其他</view>
					<image
						v-show="form.proid === 0"
						src="https://aph.junhecms.com/image/homePage/20.png" />
				</view>
			</scroll-view>
			<u-gap height="55rpx"></u-gap>
			<view class="btnConfirm" @click="confirmProduct">确定</view>
			<u-gap height="30rpx"></u-gap>
		</view>
	</u-popup>

	<!-- 提交 -->
	<u-modal
		:show="modalShow"
		:showCancelButton="false"
		width="600rpx"
		title="提交成功"
		content="工作人员看到后，会电话联系您，请留意电话"
		cancelColor="#707070"
		confirmColor="#D93954"
		cancelText="取消"
		confirmText="我知道了"
		@confirm="confirmModal"
		@cancel="modalShow = false"></u-modal>
	<footerTips></footerTips>
	<share :isCustom="true" />
	<tabbar :value="3" />
</template>

<script setup>
import { reactive, ref } from 'vue';
import upper from '@/components/upper';
import { post } from '@/utils/collect.js';
import { pageJump, baseUrl } from '@/utils/tool.js';
import { msg } from '@/utils/tool';
import footerTips from '@/components/footerTips/footerTips.vue';
uni.setStorageSync('navTitle', '联系我们');

// 产品列表
const activeProdcut = ref();
const productList = ref([]);
const _product = () => {
	post('/index/product', { page: 1, limit: 1000 }).then((res) => {
		productList.value = res.data.data;
	});
};
_product();

const confirmProduct = () => {
	if (form.proid === 0) {
		form.proname = '其他';
	} else {
		form.proname = productList.value.find((item) => item.id === form.proid)?.title;
	}
	productShow.value = false;
};

// 轮播图
const swiperList = ref([]);
const swiperParams = reactive({
	height: '400rpx'
});

// 轮播图跳转
const handleSwiper = (index) => {
	const item = swiperList.value[index];
	pageJump(item);
};

const _concatImg = () => {
	post('/index/concatImg').then((res) => {
		swiperList.value = res.data.map((item) => {
			return {
				...item,
				url: baseUrl + item.image
			};
		});
	});
};
_concatImg();

const form = reactive({
	name: undefined,
	phone: undefined,
	company: undefined,
	email: undefined,
	proname: undefined,
	description: undefined,
	proid: undefined
});

// 选择产品
const productShow = ref(false);
const handleProduct = () => {
	if (!form.proname) form.proid = undefined;
	productShow.value = true;
};

// 弹窗
const modalShow = ref(false);
const confirm = () => {
	if (!form.name) return msg('姓名不能为空');
	if (!form.phone) return msg('手机号不能为空');
	if (!form.company) return msg('公司名称不能为空');
	if (!form.email) return msg('邮箱不能为空');
	if (!form.proid || !form.proname) return msg('产品不能为空');

	post('/index/concat', form).then((res) => {
		modalShow.value = true;
	});
};
const confirmModal = () => {
	modalShow.value = false;
	uni.redirectTo({
		url: '/pages/homePage/index'
	});
};
</script>

<style>
page {
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
.product {
	min-height: 675rpx;
	&-close {
		width: 40rpx;
		height: 40rpx;
		right: 30rpx;
		top: 44rpx;
	}
	&-main {
		height: 500rpx;
	}
	&-item {
		padding: 0rpx 30rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin: 30rpx 0rpx;
		view {
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
		}
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
	&-head {
		margin-top: 44rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #2d2d2d;
		text-align: center;
	}
}
.main {
	padding: 0rpx 30rpx;
	background: #fff;
	&-item {
		border-bottom: 1rpx solid #d9d9d9;
		padding: 40rpx 0rpx;
		:deep(.u-textarea) {
			padding: 0rpx;
		}
		&-title {
			width: 200rpx - 30rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			white-space: nowrap;
		}
	}
}
.usHead {
	display: block;
	width: 750rpx;
	height: 400rpx;
}
</style>
